<template>
  <div class="Event" v-if="false">
    <header class="disasters"> 灾备看板 </header>
    <main>
      <div class="top_part">
        <div class="drillSystem">
          <div class="navhearter">
            <p>灾备演练系统</p>
            <div class="select_box">
              <!-- <el-date-picker v-model="year_month_value" :type="drillSystem_type" /> -->
              <el-radio-group v-model="drillSystem_radio" @change="Month_switching">
                <el-radio-button label="年度" />
                <el-radio-button label="月度" />
              </el-radio-group>
            </div>
          </div>
          <div class="content">
            <div class="Planning">
              <p @click="goPlanFinsh('1', '')">
                <span>{{ drillSystem?.planISystems ? drillSystem?.planISystems : 0 }}</span>
                个系统
              </p>
              <div class="plan" @click="goPlanFinsh('1', '')">计划</div>
              <div class="plan_classification">
                <div class="Critical" @click="goPlanFinsh('1', '1')">
                  <img src="@/assets/images/zyxt.png" alt="" />
                  <div class="sys_title">
                    <p>{{
                      drillSystem?.planImportantSystems ? drillSystem?.planImportantSystems : 0
                    }}</p>
                    重要系统(个）
                  </div>
                </div>
                <div class="Non_critical" @click="goPlanFinsh('1', '0')">
                  <img src="@/assets/images/fzyxt.png" alt="" />
                  <div class="sys_title">
                    <p>{{
                      drillSystem?.planNonCriticalSystems ? drillSystem?.planNonCriticalSystems : 0
                    }}</p>
                    非重要系统(个）
                  </div>
                </div>
              </div>
            </div>
            <span class="inline"></span>
            <div class="completed">
              <p @click="goPlanFinsh('2', '')">
                <span class="completedNum">{{
                  drillSystem?.completeSystems ? drillSystem?.completeSystems : 0
                }}</span>
                个系统
              </p>
              <div class="finished" @click="goPlanFinsh('2', '')">已完成</div>
              <div class="plan_classification">
                <div class="demo-progress">
                  <el-progress
                    type="circle"
                    :stroke-width="12"
                    :percentage="
                      drillSystem.completeImportantSystemsPro
                        ? Number(drillSystem.completeImportantSystemsPro)
                        : 0
                    "
                    stroke-linecap="butt"
                  >
                    <template #default="{ percentage }">
                      <p class="percentage-value">
                        <span>{{ percentage }}</span>
                        %
                      </p>
                    </template>
                  </el-progress>
                  <div class="sys_title" @click="goPlanFinsh('2', '1')">
                    <p>{{
                      drillSystem?.completeImportantSystems
                        ? drillSystem?.completeImportantSystems
                        : 0
                    }}</p>
                    重要系统（个）
                  </div>
                </div>
                <div class="demo-progress">
                  <el-progress
                    type="circle"
                    :stroke-width="12"
                    :percentage="
                      drillSystem.completeNonCriticalSystemsPro
                        ? Number(drillSystem.completeNonCriticalSystemsPro)
                        : 0
                    "
                    stroke-linecap="butt"
                  >
                    <template #default="{ percentage }">
                      <p class="percentage-value">
                        <span>{{ percentage }}</span>
                        %
                      </p>
                    </template>
                  </el-progress>
                  <div class="sys_title" @click="goPlanFinsh('2', '0')">
                    <p>{{
                      drillSystem?.completeNonCriticalSystems
                        ? drillSystem?.completeNonCriticalSystems
                        : 0
                    }}</p>
                    非重要系统（个)
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="issue">
          <div class="navhearter">
            <p>灾备问题</p>
            <div class="select_box">
              <el-select v-model="Question_sheet" @change="Question_change">
                <el-option label="问题单个数" value="1" />
                <el-option label="涉及的系统个数" value="2" />
              </el-select>
              <!-- <el-date-picker v-model="year_month_value" :type="drillSystem_type" /> -->
              <el-radio-group v-model="issue_radio" @change="issue_problem">
                <el-radio-button label="年度" />
                <el-radio-button label="累计" />
              </el-radio-group>
            </div>
          </div>
          <div class="content">
            <div class="Planning">
              <p @click="goQuestion('1', '')">
                <span>{{ issue?.issueCount ? issue?.issueCount : 0 }}</span>
                个{{ Question_sheet == '1' ? '问题单' : Question_sheet == '2' ? '系统' : '' }}
              </p>
              <div class="plan" @click="goQuestion('1', '')">总计</div>
              <div class="plan_classification">
                <div class="Critical">
                  <img src="@/assets/images/zyxt.png" alt="" />
                  <div class="sys_title" @click="goQuestion('1', '1')">
                    <p>{{ issue?.yesSystemIssueCount ? issue?.yesSystemIssueCount : 0 }}</p>
                    重要系统(个）
                  </div>
                </div>
                <div class="Non_critical" @click="goQuestion('1', '0')">
                  <img src="@/assets/images/fzyxt.png" alt="" />
                  <div class="sys_title">
                    <p>{{ issue?.noSystemIssueCount ? issue?.noSystemIssueCount : 0 }} </p>
                    非重要系统(个）
                  </div>
                </div>
              </div>
            </div>
            <span class="inline"></span>
            <div class="completed">
              <p @click="goQuestion('2', '')">
                <span class="completedNum">{{
                  issue?.closeIssueCount ? issue?.closeIssueCount : 0
                }}</span>
                个{{ Question_sheet == '1' ? '问题单' : Question_sheet == '2' ? '系统' : '' }}
              </p>
              <div class="finished" @click="goQuestion('2', '')">已关闭</div>
              <div class="plan_classification">
                <div class="demo-progress">
                  <el-progress
                    type="circle"
                    :stroke-width="12"
                    :percentage="
                      issue.yesSystemCloseIssuePro ? Number(issue.yesSystemCloseIssuePro) : 0
                    "
                    stroke-linecap="butt"
                  >
                    <template #default="{ percentage }">
                      <p class="percentage-value">
                        <span>{{ percentage }}</span>
                        %
                      </p>
                    </template>
                  </el-progress>
                  <div class="sys_title" @click="goQuestion('2', '1')">
                    <p>{{
                      issue?.yesSystemCloseIssueCount ? issue?.yesSystemCloseIssueCount : 0
                    }}</p>
                    重要系统（个）
                  </div>
                </div>
                <div class="demo-progress">
                  <el-progress
                    type="circle"
                    :stroke-width="12"
                    :percentage="
                      issue.noSystemCloseIssuePro ? Number(issue.noSystemCloseIssuePro) : 0
                    "
                    stroke-linecap="butt"
                  >
                    <template #default="{ percentage }">
                      <p class="percentage-value">
                        <span>{{ percentage }}</span>
                        %
                      </p>
                    </template>
                  </el-progress>
                  <div class="sys_title" @click="goQuestion('2', '0')">
                    <p>{{ issue?.noSystemCloseIssueCount ? issue?.noSystemCloseIssueCount : 0 }}</p>
                    非重要系统（个)
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_part">
        <div class="navhearter">
          <p>周期内解决/末解决灾备问题及涉及的系统数量</p>
          <div class="select_box">
            <el-select v-model="system_select" @change="importSystem">
              <el-option label="所有系统" value="" />
              <el-option label="重要系统" value="1" />
              <el-option label="非重要系统" value="0" />
            </el-select>
            <el-radio-group v-model="solve" @change="Handover_solution">
              <el-radio-button label="未解决" />
              <el-radio-button label="已解决" />
            </el-radio-group>
          </div>
        </div>
        <div id="headline"></div>
      </div>
    </main>
  </div>
  <div class="Event">
    <div class="top_part">
      <div class="drillSystem">
        <div class="navhearter">
          <p>灾备演练系统</p>
          <div class="select_box">
            <!-- <el-date-picker v-model="year_month_value" :type="drillSystem_type" /> -->
            <el-radio-group v-model="drillSystem_radio" @change="Month_switching">
              <el-radio-button label="年度" />
              <el-radio-button label="月度" />
            </el-radio-group>
          </div>
        </div>
        <div class="content">
          <div class="Planning">
            <p @click="goPlanFinsh('1', '')">
              <span>{{ drillSystem?.planISystems ? drillSystem?.planISystems : 0 }}</span>
              个系统
            </p>
            <div class="plan" @click="goPlanFinsh('1', '')">计划</div>
            <div class="plan_classification">
              <div class="Critical" @click="goPlanFinsh('1', '1')">
                <img src="@/assets/images/zyxt.png" alt="" />
                <div class="sys_title">
                  <p>{{
                    drillSystem?.planImportantSystems ? drillSystem?.planImportantSystems : 0
                  }}</p>
                  重要系统(个）
                </div>
              </div>
              <div class="Non_critical" @click="goPlanFinsh('1', '0')">
                <img src="@/assets/images/fzyxt.png" alt="" />
                <div class="sys_title">
                  <p>{{
                    drillSystem?.planNonCriticalSystems ? drillSystem?.planNonCriticalSystems : 0
                  }}</p>
                  非重要系统(个）
                </div>
              </div>
            </div>
          </div>
          <span class="inline"></span>
          <div class="completed">
            <p @click="goPlanFinsh('2', '')">
              <span class="completedNum">{{
                drillSystem?.completeSystems ? drillSystem?.completeSystems : 0
              }}</span>
              个系统
            </p>
            <div class="finished" @click="goPlanFinsh('2', '')">已完成</div>
            <div class="plan_classification">
              <div class="demo-progress">
                <el-progress
                  type="circle"
                  :stroke-width="12"
                  :percentage="
                    drillSystem.completeImportantSystemsPro
                      ? Number(drillSystem.completeImportantSystemsPro)
                      : 0
                  "
                  stroke-linecap="butt"
                >
                  <template #default="{ percentage }">
                    <p class="percentage-value">
                      <span>{{ percentage }}</span>
                      %
                    </p>
                  </template>
                </el-progress>
                <div class="sys_title" @click="goPlanFinsh('2', '1')">
                  <p>{{
                    drillSystem?.completeImportantSystems
                      ? drillSystem?.completeImportantSystems
                      : 0
                  }}</p>
                  重要系统（个）
                </div>
              </div>
              <div class="demo-progress">
                <el-progress
                  type="circle"
                  :stroke-width="12"
                  :percentage="
                    drillSystem.completeNonCriticalSystemsPro
                      ? Number(drillSystem.completeNonCriticalSystemsPro)
                      : 0
                  "
                  stroke-linecap="butt"
                >
                  <template #default="{ percentage }">
                    <p class="percentage-value">
                      <span>{{ percentage }}</span>
                      %
                    </p>
                  </template>
                </el-progress>
                <div class="sys_title" @click="goPlanFinsh('2', '0')">
                  <p>{{
                    drillSystem?.completeNonCriticalSystems
                      ? drillSystem?.completeNonCriticalSystems
                      : 0
                  }}</p>
                  非重要系统（个)
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="issue">
        <div class="navhearter">
          <p>灾备问题</p>
          <div class="select_box">
            <el-select v-model="Question_sheet" @change="Question_change">
              <el-option label="问题单个数" value="1" />
              <el-option label="涉及的系统个数" value="2" />
            </el-select>
            <!-- <el-date-picker v-model="year_month_value" :type="drillSystem_type" /> -->
            <el-radio-group v-model="issue_radio" @change="issue_problem">
              <el-radio-button label="年度" />
              <el-radio-button label="累计" />
            </el-radio-group>
          </div>
        </div>
        <div class="content">
          <div class="Planning">
            <p @click="goQuestion('1', '')">
              <span>{{ issue?.issueCount ? issue?.issueCount : 0 }}</span>
              个{{ Question_sheet == '1' ? '问题单' : Question_sheet == '2' ? '系统' : '' }}
            </p>
            <div class="plan" @click="goQuestion('1', '')">总计</div>
            <div class="plan_classification">
              <div class="Critical">
                <img src="@/assets/images/zyxt.png" alt="" />
                <div class="sys_title" @click="goQuestion('1', '1')">
                  <p>{{ issue?.yesSystemIssueCount ? issue?.yesSystemIssueCount : 0 }}</p>
                  重要系统(个）
                </div>
              </div>
              <div class="Non_critical" @click="goQuestion('1', '0')">
                <img src="@/assets/images/fzyxt.png" alt="" />
                <div class="sys_title">
                  <p>{{ issue?.noSystemIssueCount ? issue?.noSystemIssueCount : 0 }} </p>
                  非重要系统(个）
                </div>
              </div>
            </div>
          </div>
          <span class="inline"></span>
          <div class="completed">
            <p @click="goQuestion('2', '')">
              <span class="completedNum">{{
                issue?.closeIssueCount ? issue?.closeIssueCount : 0
              }}</span>
              个{{ Question_sheet == '1' ? '问题单' : Question_sheet == '2' ? '系统' : '' }}
            </p>
            <div class="finished" @click="goQuestion('2', '')">已关闭</div>
            <div class="plan_classification">
              <div class="demo-progress">
                <el-progress
                  type="circle"
                  :stroke-width="12"
                  :percentage="
                    issue.yesSystemCloseIssuePro ? Number(issue.yesSystemCloseIssuePro) : 0
                  "
                  stroke-linecap="butt"
                >
                  <template #default="{ percentage }">
                    <p class="percentage-value">
                      <span>{{ percentage }}</span>
                      %
                    </p>
                  </template>
                </el-progress>
                <div class="sys_title" @click="goQuestion('2', '1')">
                  <p>{{ issue?.yesSystemCloseIssueCount ? issue?.yesSystemCloseIssueCount : 0 }}</p>
                  重要系统（个）
                </div>
              </div>
              <div class="demo-progress">
                <el-progress
                  type="circle"
                  :stroke-width="12"
                  :percentage="
                    issue.noSystemCloseIssuePro ? Number(issue.noSystemCloseIssuePro) : 0
                  "
                  stroke-linecap="butt"
                >
                  <template #default="{ percentage }">
                    <p class="percentage-value">
                      <span>{{ percentage }}</span>
                      %
                    </p>
                  </template>
                </el-progress>
                <div class="sys_title" @click="goQuestion('2', '0')">
                  <p>{{ issue?.noSystemCloseIssueCount ? issue?.noSystemCloseIssueCount : 0 }}</p>
                  非重要系统（个)
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_part">
      <div class="navhearter">
        <p>周期内解决/末解决灾备问题及涉及的系统数量</p>
        <div class="select_box">
          <el-select v-model="system_select" @change="importSystem">
            <el-option label="所有系统" value="" />
            <el-option label="重要系统" value="1" />
            <el-option label="非重要系统" value="0" />
          </el-select>
          <el-radio-group v-model="solve" @change="Handover_solution">
            <el-radio-button label="未解决" />
            <el-radio-button label="已解决" />
          </el-radio-group>
        </div>
      </div>
      <div id="headline"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus';
  import { ref, onMounted, getCurrentInstance, markRaw } from 'vue';
  import { disasterDrillCount, disasterIssueCount, cycleDisasterChart } from '@/http/Disaster';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const drillSystem_value = ref(
    localStorage.getItem('drillSystem_value')
      ? localStorage.getItem('drillSystem_value')
      : JSON.stringify(new Date().getFullYear())
  ); // 演练系统年月选择
  // const drillSystem_type = ref('year');
  const Annual_accumulation = ref(
    localStorage.getItem('Annual_accumulation') == ''
      ? localStorage.getItem('Annual_accumulation')
      : JSON.stringify(new Date().getFullYear())
  );
  const drillSystem_radio = ref(
    localStorage.getItem('drillSystem_radio') ? localStorage.getItem('drillSystem_radio') : '年度'
  );
  const issue_radio = ref(
    localStorage.getItem('issue_radio') ? localStorage.getItem('issue_radio') : '年度'
  );
  const solve = ref('未解决');
  const solve_num = ref('1');
  const headline = ref<HTMLElement>();
  const { proxy } = getCurrentInstance() as any;
  const system_select = ref(''); // 折线图下拉选
  const Question_sheet = ref(
    localStorage.getItem('Question_sheet') ? localStorage.getItem('Question_sheet') : '1'
  ); // 灾备问题下拉选
  const drillSystem = ref(''); // 演练系统
  const issue = ref(''); // 灾备问题
  onMounted(() => {
    // headline_list();
    DrillCount();
    IssueCount();
    DisasterChart();
  });
  const DrillCount = () => {
    disasterDrillCount({
      qhyljhDate: drillSystem_value.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      drillSystem.value = res.data.data;
    });
  };
  const IssueCount = () => {
    disasterIssueCount({
      qhyljhDate: Annual_accumulation.value,
      flag: Question_sheet.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      issue.value = res.data.data;
    });
  };
  const DisasterChart = () => {
    cycleDisasterChart({
      flag: solve_num.value,
      isKeySys: system_select.value
    }).then((res) => {
      if ((res as any).data.code !== 0) {
        ElMessage({
          message: (res as any).data.msg,
          type: 'error'
        });
        return;
      }
      // headline.value = '';
      const { incompleteIssueList, incompleteSystemList } = res.data.data;
      headline_list(incompleteIssueList, incompleteSystemList);
    });
  };
  const headline_list = (IssueList: string, SystemList: string) => {
    if (headline.value != null && headline.value != '' && headline.value != undefined) {
      headline.value.dispose();
    }
    headline.value = markRaw(proxy.$ECharts.init(document.getElementById('headline')));
    const {
      lessThanOneMonthIssueNumBer,
      oneToThreeMonthsIssueNumBer,
      threeToSixMonthsIssueNumBer,
      sixToNineMonthsIssueNumBer,
      nineToTwelveMonthsIssueNumBer,
      overTwelveMonthsIssueNumBer
    } = IssueList;
    const {
      lessThanOneMonthSystemNumBer,
      oneToThreeMonthsSystemNumBer,
      threeToSixMonthsSystemNumBer,
      sixToNineMonthsSystemNumBer,
      nineToTwelveMonthsSystemNumBer,
      overTwelveMonthsSystemNumBer
    } = SystemList;
    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true,
        textStyle: {
          fontSize: 10
        }
      },
      legend: {
        icon: 'circle',
        right: '0%',
        height: 'auto',
        top: '0',
        itemGap: 8,
        selectedMode: false,
        itemWidth: 6,
        textStyle: {
          color: '#777b85',
          fontSize: '19',
          fontWeight: '400'
        }
      },
      grid: {
        left: '28',
        bottom: '40',
        top: '70',
        right: '80',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        // boundaryGap: false,
        data: ['1个月以下', '1-3个月', '3-6个月', '6-9个月', '9-12个月', '12个月及以上'],
        axisLabel: {
          fontSize: 19,
          padding: [8, 0, 0, 0]
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '系统数',
          type: 'line',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 3
          },
          // stack: 'Total',
          data: [
            lessThanOneMonthSystemNumBer,
            oneToThreeMonthsSystemNumBer,
            threeToSixMonthsSystemNumBer,
            sixToNineMonthsSystemNumBer,
            nineToTwelveMonthsSystemNumBer,
            overTwelveMonthsSystemNumBer
          ]
        },
        {
          name: '问题数',
          type: 'line',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 3
          },
          // stack: 'Total',
          data: [
            lessThanOneMonthIssueNumBer,
            oneToThreeMonthsIssueNumBer,
            threeToSixMonthsIssueNumBer,
            sixToNineMonthsIssueNumBer,
            nineToTwelveMonthsIssueNumBer,
            overTwelveMonthsIssueNumBer
          ]
        }
      ]
    };
    option && headline.value.setOption(option);
  };
  const Month_switching = () => {
    if (drillSystem_radio.value == '年度') {
      drillSystem_value.value = JSON.stringify(new Date().getFullYear());
      DrillCount();
    } else if (drillSystem_radio.value == '月度') {
      const month =
        new Date().getMonth() > 9 ? new Date().getMonth() + 1 : '0' + (new Date().getMonth() + 1);
      drillSystem_value.value = JSON.stringify(new Date().getFullYear()) + month;
      DrillCount();
    }
  };
  const issue_problem = () => {
    if (issue_radio.value == '年度') {
      Annual_accumulation.value = JSON.stringify(new Date().getFullYear());
      IssueCount();
    } else if (issue_radio.value == '累计') {
      Annual_accumulation.value = '';
      IssueCount();
    }
  };
  const Handover_solution = () => {
    if (solve.value == '已解决') {
      solve_num.value = '2';
    } else if (solve.value == '未解决') {
      solve_num.value = '1';
    }
    DisasterChart();
  };
  const Question_change = () => {
    IssueCount();
  };
  const importSystem = () => {
    DisasterChart();
  };
  const goPlanFinsh = (typeNum: string, is_important: any) => {
    router.push({
      name: 'plan_finish_list',
      params: {
        type: typeNum,
        importSys: is_important,
        qhyljhDate: drillSystem_value.value
      }
    });
    localStorage.setItem('drillSystem_radio', drillSystem_radio.value);
    localStorage.setItem('drillSystem_value', drillSystem_value.value);
    headline.value.dispose();
  };
  const goQuestion = (typeNum: string, is_important: any) => {
    if (Question_sheet.value == '1') {
      router.push({
        name: 'Question_sheet',
        params: {
          type: typeNum,
          importSys: is_important,
          qhyljhDate: Annual_accumulation.value
        }
      });
      headline.value.dispose();
    } else {
      router.push({
        name: 'Involved_system',
        params: {
          type: typeNum,
          importSys: is_important,
          qhyljhDate: Annual_accumulation.value
        }
      });
      headline.value.dispose();
    }
    localStorage.setItem('issue_radio', issue_radio.value);
    localStorage.setItem('Annual_accumulation', Annual_accumulation.value);
    localStorage.setItem('Question_sheet', Question_sheet.value);
  };
</script>
<style scoped lang="less">
  .Event {
    width: 100%;
    height: 100%;
    background: #ebeff5;
    // padding: 27px;
    box-sizing: border-box;
    /* header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 27px;
      font-size: 24px;
      font-weight: bold;
      color: #46535d;
    } */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .top_part {
      // height: 480px;
      height: 47%;
      display: flex;
      justify-content: space-between;
      .drillSystem,
      .issue {
        width: 920px;
        box-sizing: border-box;
        background: #fff;
        border-radius: 12px;
        padding: 17px 27px 17px 27px;
        height: 100%;
        .navhearter {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 36px;
          margin-bottom: 15px;
          p {
            margin: 0;
            padding: 0;
            font-size: 21px;
            font-weight: bold;
            color: #46535d;
          }
          .select_box {
            height: 100%;
            display: flex;
            align-items: center;
            :deep(.el-input) {
              width: 133px;
              height: 100%;
              margin-right: 12px;
              .el-input__wrapper {
                width: 133px;
                // height: 47px;
              }
            }
            :deep(.el-radio-group) {
              // height: 100%;
              border-radius: 0 0 3px 3px;
              .el-radio-button {
                border-radius: 2px;
                .el-radio-button__inner {
                  width: 136px;
                  border-radius: 2px;
                  border: 1px solid #0079f5;
                  font-size: 19px;
                  height: 34px;
                  line-height: 34px;
                  padding: 0;
                }
                &.is-active {
                  .el-radio-button__inner {
                    background: #0079f5;
                    font-size: 19px;
                  }
                }
              }
            }
          }
        }
        .content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: calc(100% - 56px);
          // box-sizing: border-box;
          .inline {
            border: 0.5px solid #dddddd;
            height: 160px;
          }
          .Planning,
          .completed {
            width: 47%;
            box-sizing: border-box;
            height: 100%;
            p {
              width: 100%;
              margin: 0;
              padding: 0;
              font-size: 20px;
              color: #46535d;
              text-align: center;
              margin-bottom: 10px;
              cursor: pointer;
              // line-height: 7px;
              span {
                font-size: 32px;
                font-weight: bold;
                color: #0079f4;
                &.completedNum {
                  color: #0aae7e;
                }
              }
            }
            .plan {
              margin: auto;
              text-align: center;
              width: 121px;
              background: url('@/assets/images/jh_bj.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              color: #fff;
              font-size: 16px;
              line-height: 35px;
              margin-bottom: 10px;
              cursor: pointer;
            }
            .finished {
              margin: auto;
              text-align: center;
              width: 121px;
              background: url('@/assets/images/ywc_bj.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
              box-sizing: border-box;
              line-height: 35px;
              color: #fff;
              font-size: 16px;
              margin-bottom: 17px;
              cursor: pointer;
            }
            .plan_classification {
              display: flex;
              padding-top: 0;
              box-sizing: border-box;
              // padding-left: 28px;
              height: calc(100% - 107px);
              // padding-bottom: 20px;
              padding-bottom: 10px;
              display: flex;
              align-items: center;
              justify-content: space-around;
              .Critical {
                width: 40%;
                // height: 90%;
                background: url('@/assets/images/lbj.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                // margin-right: 13px;
                padding: 25px 0;
                box-sizing: border-box;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img {
                  max-width: 50px;
                  max-height: 50px;
                  display: block;
                  margin: 0 auto 10px;
                }
                .sys_title {
                  font-size: 16px;
                  color: #ffffff;
                  text-align: center;
                  p {
                    margin: 0;
                    padding: 0;
                    font-size: 24px;
                    font-weight: bold;
                    color: #ffffff;
                  }
                }
              }
              .Non_critical {
                width: 40%;
                // height: 90%;
                background: url('@/assets/images/lvbj.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                padding: 25px 0;
                box-sizing: border-box;
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                img {
                  // max-width: 57px;
                  // max-height: 57px;
                  max-width: 50px;
                  max-height: 50px;
                  display: block;
                  margin: 0 auto 10px;
                }
                .sys_title {
                  font-size: 16px;
                  color: #ffffff;
                  text-align: center;
                  p {
                    margin: 0;
                    padding: 0;
                    font-size: 24px;
                    font-weight: bold;
                    color: #ffffff;
                  }
                }
              }
              :deep(.demo-progress) {
                // width: 48%;
                // .el-progress {
                //   width: 100%;
                // }
                .el-progress-circle {
                  width: 130px !important;
                  height: 130px !important;
                }

                .sys_title {
                  font-size: 16px;
                  color: #46535d;
                  text-align: center;
                  p {
                    margin: 0;
                    padding: 0;
                    font-size: 25px;
                    font-weight: bold;
                    color: #46535d;
                  }
                }
                .percentage-value {
                  font-size: 16px;
                  color: #46535d;
                  span {
                    font-size: 24px;
                    font-weight: bold;
                    color: #46535d;
                  }
                }
              }
            }
          }
        }
      }
    }
    .bottom_part {
      height: 50%;
      // height: 589px;
      background: #fff;
      border-radius: 12px;
      padding: 17px 27px 0;
      box-sizing: border-box;
      .navhearter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 48px;
        p {
          margin: 0;
          padding: 0;
          font-size: 21px;
          font-weight: bold;
          color: #46535d;
        }
        .select_box {
          height: 100%;
          display: flex;
          align-items: center;
          :deep(.el-input) {
            width: 400px;
            height: 48px;
            margin-right: 12px;
            .el-input__wrapper {
              width: 133px;
            }
          }
          :deep(.el-radio-group) {
            border-radius: 0 0 3px 3px;
            .el-radio-button {
              border-radius: 2px;
              .el-radio-button__inner {
                width: 136px;
                border-radius: 2px;
                border: 1px solid #0079f5;
                font-size: 19px;
                height: 46px;
                line-height: 46px;
                padding: 0;
              }
              &.is-active {
                .el-radio-button__inner {
                  background: #0079f5;
                  font-size: 19px;
                }
              }
            }
          }
        }
      }
      #headline {
        height: calc(100% - 48px);
        width: 100%;
      }
    }
    main {
      height: calc(100vh - 114px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top_part {
        // height: 480px;
        height: 47%;
        display: flex;
        justify-content: space-between;
        .drillSystem,
        .issue {
          width: 920px;
          box-sizing: border-box;
          background: #fff;
          border-radius: 12px;
          padding: 17px 27px 17px 27px;
          height: 100%;
          .navhearter {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 36px;
            margin-bottom: 15px;
            p {
              margin: 0;
              padding: 0;
              font-size: 21px;
              font-weight: bold;
              color: #46535d;
            }
            .select_box {
              height: 100%;
              display: flex;
              align-items: center;
              :deep(.el-input) {
                width: 133px;
                height: 100%;
                margin-right: 12px;
                .el-input__wrapper {
                  width: 133px;
                  // height: 47px;
                }
              }
              :deep(.el-radio-group) {
                // height: 100%;
                border-radius: 0 0 3px 3px;
                .el-radio-button {
                  border-radius: 2px;
                  .el-radio-button__inner {
                    width: 136px;
                    border-radius: 2px;
                    border: 1px solid #0079f5;
                    font-size: 19px;
                    height: 34px;
                    line-height: 34px;
                    padding: 0;
                  }
                  &.is-active {
                    .el-radio-button__inner {
                      background: #0079f5;
                      font-size: 19px;
                    }
                  }
                }
              }
            }
          }
          .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: calc(100% - 56px);
            // box-sizing: border-box;
            .inline {
              border: 0.5px solid #dddddd;
              height: 160px;
            }
            .Planning,
            .completed {
              width: 47%;
              box-sizing: border-box;
              height: 100%;
              p {
                width: 100%;
                margin: 0;
                padding: 0;
                font-size: 20px;
                color: #46535d;
                text-align: center;
                margin-bottom: 10px;
                cursor: pointer;
                // line-height: 7px;
                span {
                  font-size: 32px;
                  font-weight: bold;
                  color: #0079f4;
                  &.completedNum {
                    color: #0aae7e;
                  }
                }
              }
              .plan {
                margin: auto;
                text-align: center;
                width: 121px;
                background: url('@/assets/images/jh_bj.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                color: #fff;
                font-size: 16px;
                line-height: 35px;
                margin-bottom: 10px;
                cursor: pointer;
              }
              .finished {
                margin: auto;
                text-align: center;
                width: 121px;
                background: url('@/assets/images/ywc_bj.png');
                background-repeat: no-repeat;
                background-size: 100% 100%;
                box-sizing: border-box;
                line-height: 35px;
                color: #fff;
                font-size: 16px;
                margin-bottom: 17px;
                cursor: pointer;
              }
              .plan_classification {
                display: flex;
                padding-top: 0;
                box-sizing: border-box;
                // padding-left: 28px;
                height: calc(100% - 107px);
                // padding-bottom: 20px;
                padding-bottom: 10px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .Critical {
                  width: 40%;
                  // height: 90%;
                  background: url('@/assets/images/lbj.png');
                  background-size: 100% 100%;
                  background-repeat: no-repeat;
                  // margin-right: 13px;
                  padding: 25px 0;
                  box-sizing: border-box;
                  cursor: pointer;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  img {
                    max-width: 50px;
                    max-height: 50px;
                    display: block;
                    margin: 0 auto 10px;
                  }
                  .sys_title {
                    font-size: 16px;
                    color: #ffffff;
                    text-align: center;
                    p {
                      margin: 0;
                      padding: 0;
                      font-size: 24px;
                      font-weight: bold;
                      color: #ffffff;
                    }
                  }
                }
                .Non_critical {
                  width: 40%;
                  // height: 90%;
                  background: url('@/assets/images/lvbj.png');
                  background-repeat: no-repeat;
                  background-size: 100% 100%;
                  padding: 25px 0;
                  box-sizing: border-box;
                  cursor: pointer;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  flex-direction: column;
                  img {
                    // max-width: 57px;
                    // max-height: 57px;
                    max-width: 50px;
                    max-height: 50px;
                    display: block;
                    margin: 0 auto 10px;
                  }
                  .sys_title {
                    font-size: 16px;
                    color: #ffffff;
                    text-align: center;
                    p {
                      margin: 0;
                      padding: 0;
                      font-size: 24px;
                      font-weight: bold;
                      color: #ffffff;
                    }
                  }
                }
                :deep(.demo-progress) {
                  // width: 48%;
                  // .el-progress {
                  //   width: 100%;
                  // }
                  .el-progress-circle {
                    width: 130px !important;
                    height: 130px !important;
                  }

                  .sys_title {
                    font-size: 16px;
                    color: #46535d;
                    text-align: center;
                    p {
                      margin: 0;
                      padding: 0;
                      font-size: 25px;
                      font-weight: bold;
                      color: #46535d;
                    }
                  }
                  .percentage-value {
                    font-size: 16px;
                    color: #46535d;
                    span {
                      font-size: 24px;
                      font-weight: bold;
                      color: #46535d;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .bottom_part {
        height: 50%;
        // height: 589px;
        background: #fff;
        border-radius: 12px;
        padding: 17px 27px 0;
        box-sizing: border-box;
        .navhearter {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 48px;
          p {
            margin: 0;
            padding: 0;
            font-size: 21px;
            font-weight: bold;
            color: #46535d;
          }
          .select_box {
            height: 100%;
            display: flex;
            align-items: center;
            :deep(.el-input) {
              width: 400px;
              height: 48px;
              margin-right: 12px;
              .el-input__wrapper {
                width: 133px;
              }
            }
            :deep(.el-radio-group) {
              border-radius: 0 0 3px 3px;
              .el-radio-button {
                border-radius: 2px;
                .el-radio-button__inner {
                  width: 136px;
                  border-radius: 2px;
                  border: 1px solid #0079f5;
                  font-size: 19px;
                  height: 46px;
                  line-height: 46px;
                  padding: 0;
                }
                &.is-active {
                  .el-radio-button__inner {
                    background: #0079f5;
                    font-size: 19px;
                  }
                }
              }
            }
          }
        }
        #headline {
          height: calc(100% - 48px);
          width: 100%;
        }
      }
    }
  }
</style>
